<!DOCTYPE html>
<html>
<head></head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>会员注册</title>
<link rel="stylesheet" href="../../../lib/css/bootstrap.min.css" type="text/css" />
<script src="/js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="/js/bootstrap.min.js" type="text/javascript"></script>
<!-- 引入自定义css文件 style.css -->

<style>
    body{
        margin-top:20px;
        margin:0 auto;
    }
    .carousel-inner .item img{
        width:100%;
        height:300px;
    }
    .container .row div{
        /* position:relative;
        float:left; */
    }

    font {
        color: #3164af;
        font-size: 18px;
        font-weight: normal;
        padding: 0 10px;
    }

</style>
<script>
    /*
     * 省市联动
     准备工作 : 准备数据
     */

    var provinces = [
        ["深圳市","东莞市","惠州市","广州市","清远市","韶关市","潮州市","清远市"],
        ["长沙市","岳阳市","株洲市","湘潭市","张家界","益阳市","永州市"],
        ["厦门市","福州市","漳州市","泉州市","南平市","宁德市","莆田市"]
    ];
    /*
     1. 确定事件:  onchange
     2. 函数: selectProvince()
     3. 函数里面要搞事情了
     得到当前操作元素
     得到当前选中的是那一个省份
     从数组中取出对应的城市信息

     动态创建城市元素节点
     添加到城市select中

     */
    window.onload = () => {
        let objPro = document.getElementById("province");
        objPro.onchange=function (){

            var province = document.getElementById("province");
            //得到当前选中的是哪个省份
            //alert(province.value);
            var value = province.value;
            //从数组中取出对应的城市信息
            var cities = provinces[value];
            var citySelect = document.getElementById("city");
            //清空select中的option
            citySelect.options.length = 0;

            for (var i=0; i < cities.length; i++) {
//					alert(cities[i]);
                var cityText = cities[i];
                //动态创建城市元素节点   <option>东莞市</option>

                //创建option节点
                var option1 = document.createElement("option"); // <option></option>
                //创建城市文本节点
                var textNode = document.createTextNode(cityText) ;// 东莞市

                //将option节点和文本内容关联起来
                option1.appendChild(textNode);  //<option>东莞市</option>

//					添加到城市select中
                citySelect.appendChild(option1);
            }

        }
    }
    function had()
    {
        span_username = document.getElementById("usernameTip");
        span_password = document.getElementById("passwordTip");
        span_email = document.getElementById("emailTip");
        span_telephone = document.getElementById("telephoneTip");
        span_name = document.getElementById("nameTip");
        span_address = document.getElementById("addressTip");




        span_username.innerHTML="";
        span_username.style.color="red";

        span_password.innerHTML="";
        span_password.style.color="red";

        span_email.innerHTML="";
        span_email.style.color="red";

        span_telephone.innerHTML="";
        span_telephone.style.color="red";

        span_name.innerHTML="";
        span_name.style.color="red";

        span_address.innerHTML="";
        span_address.style.color="red";
    }
    function show()
    {
        span_username = document.getElementById("usernameTip");
        span_password = document.getElementById("passwordTip");
        span_email = document.getElementById("emailTip");
        span_telephone = document.getElementById("telephoneTip");
        span_name = document.getElementById("nameTip");
        span_address = document.getElementById("addressTip");




        span_username.innerHTML="请输入6-8位";
        span_username.style.color="red";

        span_password.innerHTML="请输入6-8位,且密码和用户名不能相同";
        span_password.style.color="red";

        span_email.innerHTML="请输入xxx@yyy.com";
        span_email.style.color="red";

        span_telephone.innerHTML="不能为空";
        span_telephone.style.color="red";

        span_name.innerHTML="不能为空";
        span_name.style.color="red";

        span_address.innerHTML="不能为空";
        span_address.style.color="red";

        setTimeout("had()",5000);

    }
    $(function()
    {
        setTimeout("show()",1000);

    });
    function usernameCheck()
    {

        var username = document.getElementById("username").value;
        var span = document.getElementById("usernameTip");
        if(username.length<6)
        {

            span.innerHTML="请输入6-8位";
            span.style.color="red";

        }
        else
        {
            span.innerHTML="√";
            span.style.color="green";
        }
    }

    function passwordCheck()
    {

        var password1 = document.getElementById("inputPassword3").value;
        var username = document.getElementById("username").value;
        var span = document.getElementById("passwordTip");
        if(password1.length<6)
        {

            span.innerHTML="请输入6-8位";
            span.style.color="red";

        }
        else if(password1==username){
            span.innerHTML="密码和用户名不能相同";
            span.style.color="red";
        }
        else
        {
            span.innerHTML="√";
            span.style.color="green";
        }
    }
    function confirmpwdCheck()
    {

        var confirmpwd = document.getElementById("confirmpwd").value;
        var password1 = document.getElementById("inputPassword3").value;
        var span = document.getElementById("confirmpwdTip");
        if(confirmpwd!=password1)
        {

            span.innerHTML="两次密码不一致";
            span.style.color="red";

        }

        else
        {
            span.innerHTML="√";
            span.style.color="green";

        }
    }
    function emailCheck()
    {
        var email = document.getElementById("inputEmail3").value;
        var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
        var span = document.getElementById("emailTip");
        if(myreg.test(email)){
            span.innerHTML="√";
            span.style.color="green";
        }else{
            span.innerHTML="邮箱格式不正确";
            span.style.color="red";
        }

    }
    function telephoneCheck()
    {
        var email = document.getElementById("telephone").value;
        var myreg = /^1(3|4|5|7|8)\d{9}$/;
        var span = document.getElementById("telephoneTip");
        if(myreg.test(email)){
            span.innerHTML="√";
            span.style.color="green";
        }else{
            span.innerHTML="手机格式不正确，请重填";
            span.style.color="red";
        }

    }

</script>
</head>
<body>



<div class="container" style="width:100%;background:url('${pageContext.request.contextPath}/img/regist_bg.jpg');">
    <div class="row">

        <div class="col-md-2"></div>




        <div class="col-md-8" style="background:#fff;padding:40px 80px;margin:30px;border:7px solid #ccc;">
            <font>用户注册</font>USER REGISTER
            <form class="form-horizontal" style="margin-top:5px;" action="${pageContext.request.contextPath}/UserServlet?method=regist" method="post">
                <div class="form-group">
                    <label for="username" class="col-sm-2 control-label">用户名</label>
                    <div class="col-sm-6">
                        <input type="text" maxlength="8" onblur="usernameCheck()" name="username"  class="form-control" id="username" placeholder="请输入用户名">
                    </div>
                    <span id = "usernameTip" class="tip"></span>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
                    <div class="col-sm-6">
                        <input type="password" name="password" onblur="passwordCheck()" class="form-control" id="inputPassword3" placeholder="请输入密码">
                    </div>
                    <span id = "passwordTip" class="tip"></span>
                </div>
                <div class="form-group">
                    <label for="confirmpwd" class="col-sm-2 control-label">确认密码</label>
                    <div class="col-sm-6">
                        <input type="password" class="form-control" onblur="confirmpwdCheck()" id="confirmpwd" placeholder="请输入确认密码">
                    </div>
                    <span id = "confirmpwdTip" class="tip"></span>

                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                    <div class="col-sm-6">
                        <input type="email" name="email" onblur="emailCheck()" class="form-control" id="inputEmail3" placeholder="Email">
                    </div>
                    <span id = "emailTip" class="tip"></span>
                </div>
                <div class="form-group">
                    <label for="date" class="col-sm-2 control-label">学历</label>
                    <div class="col-sm-6">
                        <input type="radio" name="scholar" value="专科" />专科 &nbsp;&nbsp;
                        <input type="radio" name="scholar" value="本科" />本科&nbsp;&nbsp;
                        <input type="radio" name="scholar" value="硕士研究生" />硕士研究生 &nbsp;
                        <input type="radio" name="scholar" value="博士研究生" />  博士研究生&nbsp;&nbsp;
                        <input type="radio" name="scholar" value="其他" />  其他&nbsp;&nbsp;
                    </div>
                </div>
                <div class="form-group">
                    <label for="date" class="col-sm-2 control-label">地区</label>
                    <div class="col-sm-6">
                        <!--选择省份-->
                        <select id="province" name="province" >
                            <option value="-1" selected="selected">--请选择--</option>
                            <option value="0">广东省</option>
                            <option value="1">湖南省</option>
                            <option value="2">福建省</option>
                        </select>
                        <!--选择城市-->
                        <select id="city"></select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="myPhone" class="col-sm-2 control-label">地址</label>
                    <div class="col-sm-6">
                        <input id="myPhone" type="text" class="form-control"  name="address" placeholder="address">
                    </div>
                    <span id = "addressTip" class="tip"></span>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">手机号码</label>
                    <div class="col-sm-6">
                        <input type="text" name="telephone" onblur="telephoneCheck()" class="form-control" id="telephone" placeholder="telephone">
                    </div>
                    <span id = "telephoneTip" class="tip"></span>
                </div>
                <div class="form-group">
                    <label for="usercaption" class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-6">
                        <input type="text" name="name" class="form-control" id="usercaption" placeholder="请输入姓名">
                    </div>
                    <span id = "nameTip" class="tip"></span>
                </div>
                <div class="form-group opt">
                    <label for="inlineRadio1" class="col-sm-2 control-label">性别</label>
                    <div class="col-sm-6">
                        <label class="radio-inline">
                            <input type="radio" name="sex" id="inlineRadio1" value="男" checked="checked"> 男
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="sex" id="inlineRadio2" value="女"> 女
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label for="date" class="col-sm-2 control-label">出生日期</label>
                    <div class="col-sm-6">
                        <input type="date" name="birthday" class="form-control"  >
                    </div>
                </div>
                <div class="form-group">
                    <label for="date" class="col-sm-2 control-label">备注</label>
                    <div class="col-sm-6">
                        <textarea rows="5" cols="50" class="form-control"></textarea>
                    </div>
                </div>

                <div class="form-group">
                    <label for="date" class="col-sm-2 control-label">验证码</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control"  >

                    </div>
                    <div class="col-sm-2">
                        <img src="${pageContext.request.contextPath}/img/captcha.jhtml"/>
                    </div>

                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <a href="登录.html">
                            <input type="button"  width="100" value="注册" name="submit" border="0"
                                   style="background: url('${pageContext.request.contextPath}/img/register.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
				    height:35px;width:100px;color:white;">
                        </a>
                    </div>
                </div>
            </form>
        </div>

        <div class="col-md-2"></div>

    </div>
</div>

<script>
    $(".username").blur(function()
    {
        passwordCheck();
    })
</script>
</body></html>
